// 实现带超时的请求函数
function fetchWithTimeout(url, timeoutNum) {
    // TODO
    // 1. 创建Promise p1,用来请求url
    // 2. 创建Promise p2,封装一个时间为timeoutNum的计时器
    // 3. 使用Promise.race, 参数为p1, p2,当p1或p2为完成状态时（settled）执行下一步（例如返回一个空值或者提示）

    // 1. 创建Promise p1,用来请求url
    const p1 = fetch(url)
        .then(response => {
            console.log('response:', response)
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });

    // 2. 创建Promise p2,封装一个时间为timeoutNum的计时器
    const p2 = new Promise((_, reject) => {
        setTimeout(() => {
            reject(new Error(`Request timed out after ${timeoutNum}ms`));
        }, timeoutNum);
    });

    // 3. 使用Promise.race, 参数为p1, p2
    return Promise.race([p1, p2])
        .catch(error => {
            console.error('Error:', error.message);
            return null; // 返回空值表示请求失败或超时
        });
}

// 使用示例
fetchWithTimeout('https://api.example.com/data', 5000)
    .then(data => {
        if (data !== null) {
            console.log('Data:', data);
        } else {
            console.log('Request failed or timed out');
        }
    });

// 函数说明
// p1 - 使用fetch API发起网络请求，并处理响应：
//
// 检查响应是否成功（response.ok）
//
// 将响应解析为JSON格式
//
// p2 - 创建一个超时Promise：
//
// 在指定时间（timeoutNum毫秒）后拒绝Promise
//
// 拒绝时返回一个包含超时信息的错误
//
// Promise.race - 竞速机制：
//
// 哪个Promise先完成（无论是解决还是拒绝）就采用它的结果
//
// 如果请求先完成，返回请求结果
//
// 如果超时先触发，返回null并输出错误信息
//
// 错误处理：
//
// 捕获所有可能的错误（网络错误或超时错误）
//
// 统一返回null表示失败
//
// 在控制台输出具体错误信息便于调试
//
// 这个函数可以确保网络请求不会无限期等待，在指定时间内没有响应就会自动终止并返回提示信息。